<template>
  <div class="base-dialog">
    <el-dialog title="编辑基本信息" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" class="add-order-dialog">
      <el-form ref="form" :model="dialogForm" label-width="80px">
        <el-form-item label="订单类型">
          <el-input v-model="dialogForm.orderType"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="dialogForm.customer"></el-input>
        </el-form-item>
        <el-form-item label="尺码">
          <el-input v-model="dialogForm.orderSize"></el-input>
        </el-form-item>
        <el-form-item label="图案">
          <el-input v-model="dialogForm.wantPic"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="dialogForm.remark" type="textarea" maxlength="200" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { orderBase } from '@/api/order'
export default {
  components: {
  },
  props: {
    show: { type: Boolean, default: false },
    row: { type: Object, default: () =>{} }
  },
  watch: {
    show(val) {
      this.dialogVisible = val
      if (val) {
        const { id, order_type, customer, order_size, want_pic, remark} = this.row
        this.dialogForm = {
          id,
          orderType: order_type,
          customer,
          orderSize: order_size,
          wantPic: want_pic,
          remark
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogForm: {
        id: '',
        orderType: '',
        customer: '',
        orderSize: '',
        wantPic: '',
        remark: '',
      },
    }
  },
  mounted() {
  },
  methods: {
    async confirm() {
      const res = await orderBase(this.dialogForm)
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        this.$emit('refresh')
        this.handleClose()
      }
    },

    handleClose() {
      this.dialogVisible = false
      this.dialogForm.id = ''
      this.dialogForm.orderType = ''
      this.dialogForm.customer = ''
      this.dialogForm.orderSize = ''
      this.dialogForm.wantPic = ''
      this.dialogForm.remark = ''
      this.$emit('update:show', false)
    },
  }
}
</script>
<style lang="scss">
</style>

